<template>
  <div class="container">
    <div class="search">
      <el-select v-model="params.consumerId" placeholder="请选择用户" clearable @change="findBySearch">
        <el-option v-for="item in consumerData" :key="item.id" :label="item.username" :value="item.id"></el-option>
      </el-select>
      <el-select v-model="params.status" placeholder="请选择评论状态" clearable @change="findBySearch">
        <el-option label="启用" value="0"></el-option>
        <el-option label="禁用" value="1"></el-option>
      </el-select>
      <el-select v-model="params.songListId" placeholder="请选择歌单" clearable @change="findBySearch">
        <el-option v-for="item in songListData" :key="item.id" :label="item.songListTitle" :value="item.id"></el-option>
      </el-select>
      <el-button type="warning" @click="clearParams">清空</el-button>
      <el-button type="success">平均评分:{{ averageScore }}</el-button>
    </div>

    <div class="table">
      <el-table :data="rankListData" height="75vh" stripe highlight-current-row>
        <el-table-column label="序号" prop="id" sortable width="80"></el-table-column>
        <el-table-column label="评分人" prop="username" width="130"></el-table-column>
        <el-table-column label="评分对象" prop="songListTitle"></el-table-column>
        <el-table-column label="分数" prop="score" width="400" align="center">
          <template #default="{ row }">
            <el-rate
              v-model="row.score"
              :max="10"
              :low-threshold="4"
              :high-threshold="8"
              disabled
              :colors="['#99A9AF', '#F7BA2A', '#FF5500']"
              show-score
              text-color="#ff9900"
            ></el-rate>
          </template>
        </el-table-column>
        <el-table-column label="评分状态" prop="status">
          <template #default="{ row }">
            <el-switch v-model="row.status" active-value="0" inactive-value="1" @change="updateStatus(row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-popconfirm
              title="您确定删除嘛？"
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="deleteRankList(row)"
            >
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination">
      <el-pagination
        v-model:current-page="params.pageNum"
        v-model:page-size="params.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        size="default"
        layout="total, sizes, prev, pager, next, jumper"
        :total="params.total"
        @size-change="findBySearch"
        @current-change="findBySearch"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  rankListAvgApi,
  rankListDeleteApi,
  rankListFindBySearchApi,
  rankListFindConsumerApi,
  rankListFindSongListApi,
  rankListSaveApi,
} from '@/api/rankList'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'

const params = ref({
  consumerId: '',
  status: '',
  songListId: '',
  pageNum: 1,
  pageSize: 10,
  total: '',
})
const averageScore = ref()
const rankListData: any = ref([])
const consumerData: any = ref([])
const songListData: any = ref([])

onMounted(() => {
  findBySearch()
  findAllConsumer()
  findAllSongList()
})

const findBySearch = async () => {
  let res = await rankListFindBySearchApi(params.value)
  params.value.total = res.data.total
  rankListData.value = res.data.list
  // 算平均评分
  // let totalScore = 0
  // res.data.list.forEach((item:any) => {
  //   totalScore += item.score
  // });
  // averageScore.value = totalScore / res.data.total
  let res1 = await rankListAvgApi(params.value)
  averageScore.value = res1.data.toFixed(2)
}
const findAllConsumer = async () => {
  let res = await rankListFindConsumerApi()
  consumerData.value = res.data
}
const findAllSongList = async () => {
  let res = await rankListFindSongListApi()
  songListData.value = res.data
}
const clearParams = () => {
  Object.assign(params.value, {
    consumerId: '',
    status: '',
    songListId: '',
    pageNum: 1,
    pageSize: 10,
  })
  findBySearch()
}
const updateStatus = async (row: any) => {
  await rankListSaveApi(row)
  ElMessage.success('修改状态成功')
}
const deleteRankList = async (row: any) => {
  await rankListDeleteApi(row.id)
  ElMessage.success('删除成功')
  findBySearch()
}
</script>

<style scoped lang="scss">
.container {
  .search {
    display: flex;
    flex-wrap: nowrap;

    .el-input {
      width: 200px;
      margin-right: 10px;
    }

    .el-select {
      width: 150px;
      margin-right: 10px;
    }
  }

  .table {
    margin: 15px 0;

    .el-switch {
      --el-switch-on-color: #13ce66;
      --el-switch-off-color: #ff4949;
    }

    // 限制歌词的显示格式
    .multiline-ellipsis {
      display: -webkit-box;
      /* 多行折叠支持 */
      -webkit-line-clamp: 1;
      /* 限制显示的行数 */
      -webkit-box-orient: vertical;
      /* 垂直排列子元素（多行） */
      overflow: hidden;
      /* 超出隐藏 */
      text-overflow: ellipsis;
      /* 超出用省略号 */
      line-height: 20px;
      /* 每行高度（可调） */
      max-height: 60px;
      /* 3行 * line-height */
    }
  }

  .pagination {
    display: flex;
    justify-content: center;
  }

  .dialog {
    .el-input,
    .el-select {
      width: 80%;
    }
  }
}

/* CSS */
.cell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// 深度选择器
.none-up ::v-deep(.el-upload--picture-card) {
  display: none;
}
</style>
